<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 只让第一个li变成红色 */
      /* ul > li#F{
            color: tomato;
        } */
      /* 
            伪类（不存在的类，特殊的类）
                -伪类用来描述一个元素的特殊状态
                    比如：第一个子元素、被点击的元素、鼠标移入的元素
                -伪类一般情况下都是使用：开头
                ：first-child
                */
      /* ul > li:first-child{
            color: tomato;
        } 
                :last-child 最后一个子元素
                :nth-child(8)选中第8个元素
                    特殊值：
                        n 第n个  n的范围0~正无穷
                        2n 或者 even表 示选中的偶数位的元素
                        2n+1 或者 odd 表示选中奇数位的元素
        
        */
      /* ul > li:nth-child(odd){
            color: tomato;
        } */

      /* ul > li:first-child{
            color: yellow;
        }
        /* 第一个子元素不是li,用以下的方法,找同类型中第一个子元素 */
      /*
       ul > li:first-of-type{
            color: violet;
            } */
      /* 
             ：first-of-type
             :last-of-type
             :nth-of-type()        
             :not() 否定伪类,除了这些外 
        */

      ul > li:not(:nth-of-type(1)) {
        color: turquoise;
      }
    </style>
  </head>
  <body>
    <ul>
      <span>我是一个span</span>
      <li>第0个</li>
      <li id="F">first</li>
      <li>second</li>
      <li>third</li>
      <li>forth</li>
    </ul>
    <!-- ul:无序列表 -->
  </body>
</html>
